<template>
    <div class="pre-order">
        <h1>确认订单</h1>
        <el-table
            :data="currentProduct"
            style="width: 100%">
            <el-table-column
                label="充值产品">
                <template v-slot="{row}">
                  <img style="vertical-align: middle" 
                       :src="row.imageUrl" alt="" width="40%">
                  &nbsp;
                  <span style="color:#f4c14f; font-weight: bolder">
                    {{row.productName}}
                  </span><br />
                  <span>{{row.description}}</span>
                </template>
            </el-table-column>
            <el-table-column
                prop="price"
                label="单价">
                <template v-slot="{row}">
                  <span>{{row.price}}</span>
                </template>
            </el-table-column>
            <el-table-column
                prop="address"
                label="数量">
                <template v-slot="{row}">
                  <el-input-number v-model="quantity" size="mini" :min="1" :max="1000000" label="描述文字">
                  </el-input-number>
                  <i v-if="false">{{row}}</i>
                </template>
            </el-table-column>
            <el-table-column
                prop="address"
                label="小计">
              <template>
                <span class="total_fee">{{total_fee}}</span>
              </template>
            </el-table-column>
        </el-table>

        <div class="total_fee">
            <div class="box_wrap">
                <div class="box_shadow">
                    <span>实付款:</span>
                    <span class="sp1">￥</span>
                    <span>{{total_fee}}</span>
                    <div class="center">
                        <span>充值详情：</span>
                        <span class="center_pro"></span>
                    </div>
                    <div class="addr">
                        <span>充值账户：</span>
                        <span>{{userInfo.username}}</span>
                    </div>
                </div>
            </div>
            <div class="btn">
                <!-- <button>提交订单</button> -->
                <el-button @click="commitOrder" type="danger">提交订单</el-button>
            </div>
        
        </div>
    </div>

 
</template>


 <script>
    import { mapState,mapMutations,mapActions} from "vuex"
    import * as api from "@/api/transaction"
    export default {
      data() {
        return {
          currentProduct: [],
          userInfo:[],
          // total_fee:'0.00', //总价格
          quantity:'1'
        }
      },
      created () {
        // console.log(this.$route);
        let { product_id } = this.$route.query
        this.product_id = product_id
        api.getProductDetailApi(product_id)
        .then(res => {
          console.log(res);
          this.currentProduct = res.data.data
        })
      },

      computed: {
        total_fee(){
          return (this.quantity * this.currentProduct[0]?.price).toFixed(2)
        },
        ...mapState({
          data: (state) => [state.currentProduct]
        })
      },
      methods: {
        //提交订单
        commitOrder(){
          this.$confirm('您正在提交订单', '是否确认?', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'info'
        })
        .then(() => {
          //调用下单接口
          api.preOrderApi(this.product_id,this.quantity)
            .then(res => {
              console.log(res);
              if(res.data.state){
                //订单获取成功，获取订单id
                let {order_id} = res.data
                // 下单成功，跳转到支付页面 携带订单id
                this.$router.push({name:"home-payment-pay" , query:{order_id}})
              }
            })
        })
        .catch(() => {
          this.$message.error('已取消提交订单')       
        });

        }
      },
      
      
    }
  </script>


  <style lang="less" scoped>
  .pre-order{
    padding: 80px 100px 0 100px;
  }
  h1{
    text-align: left;
    margin-bottom:30px;
  }
  /deep/ .cell{
    text-align: center;
  }
  .total_fee{
    margin-top:50px;
    text-align: right;
  }
  .box_wrap{
    display: inline-block;
    border: 1px solid red;
  }
  .box_shadow{
    border: 3px solid #fff0e8;
    min-width: 300px;
    padding: 10px 5px 10px 20px;
    span:nth-of-type(1){
        font-weight: 700;
        color: #333;
    }
    .sp1{
        font-size: 26px;
        margin-right: 4px;
        color: #999;
    }
    span:nth-of-type(3){
        font-size: 26px;
        font-weight: 700;
        color:rgb(255,80,0)
    }
  }
  .center{
    line-height: 1.6;
    font-weight: bolder;
    margin-top: 10px;
    font-size: 16px;
    .center_pro{
        font-size: 16px;
        color: #daa520;
    }
  }
  .addr span:nth-of-type(2){
    font-size: 20px;
    color: #ff0036;
    font-weight: bolder;
  }
  .btn{
    button{
        height: 40px;
        width: 180px;
        border: 0;
        color: white;
        background-color: #f56c6c;
        border-color: #f56c6c;
    }
  } 

  </style>